<template>
  <NuxtLayout name="default" :showBackGround="false" :showBarTitle="true" :showVanCheckbox="true" :showIcon="true"
    :isShowTopBar="true" :showAnotherLogin="true">
    <div v-for="(item, index) in buttonItems" :key="index">
      <!-- user login form view show -->
      <van-form @submit="item.click" v-if="(item.action == query) && (item.router == router)">
        <VanSpace direction="vertical" fill>
          <!-- user login form of phoneCode and phone login view component -->
          <UserDefineUserLoginFormForPhoneCodeComponents v-if="query === 'phoneCodeLoginContext'" />
          <!-- user login form of username and password login view component -->
          <UserDefineUserLoginFormForUserPwdComponents v-if="query === 'userNamePwdLoginContext'" />
          <!-- buton for user login action -->
          <VanButton :type="item.type" :block="item.block" :size="item.size" native-type="submit" round>
            {{ item.context }}
          </VanButton>
        </VanSpace>
      </van-form>
    </div>
  </NuxtLayout>
</template>

<script lang="ts" setup>
definePageMeta({ layout: false });
const query = (useRoute().query?.action) as string;
const router = (useRoute().path) as string;

const buttonItems = [
  {
    action: 'phoneCodeLoginContext', router: "/user/login", type: "primary", icon: "phone", size: "normal", block: true,
    click: useLodashDebounce(() => userLogonActionForPhoneCode(), 500),
    // click: useLodashDebounce(() => navigateToUserLoginPageForAction('navigateToUserHome'), 500),
    context: localesGetValueForKey("buttonMsg.phoneCodeLoginContext", "手机验证码登录")
  },
  {
    action: 'userNamePwdLoginContext', router: "/user/login", type: "primary", icon: "friends", size: "normal", block: true,
    click: useLodashDebounce(() => userLogonActionForUsernamePassword(), 500),
    // click: useLodashDebounce(() => navigateToUserLoginPageForAction('navigateToUserHome'), 500),
    context: localesGetValueForKey("buttonMsg.userNamePwdLoginContext", "用户账号密码登录")
  },
] as Array<ButtonGroupAction>;
</script>